<template>
  <div class="animated fadeIn">
    <Card>
      <p slot="title">会员注册</p>
      <Form ref="memberForm" label-position="left" :label-width="150" :model="member" :rules="validateForm">
        <FormItem label="会员名称" prop="name">
          <Input v-model="member.name" placeholder="请输入会员姓名" class="input"/>
        </FormItem>
        <FormItem label="会员年龄" prop="age">
          <Input v-model="member.age" placeholder="请输入会员年龄" class="input"/>
        </FormItem>
        <FormItem label="手机号" prop="mobile">
          <Input v-model="member.mobile" placeholder="请输入手机号" class="input"/>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="member.email" placeholder="请输入邮箱地址" class="input"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('memberForm')">提交</Button>
          <Button type="ghost" @click="handleReset('memberForm')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
  import fetch from '../../utils/fetch.js'
  export default {
    data (){
      return{
        member:{
          name:'',
          age:'',
          mobile: '',
          email: ''
        },
        validateForm:{
          name:[
            { required: true, message: '会员不能为空', trigger: 'blur' }
          ],
          age:[
            { required: true, message: '年龄不能为空', trigger: 'blur' }
          ],
          mobile:[
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '邮箱地址不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {

            let formData = JSON.stringify(this.member)
            fetch.post('/api/member', formData).then(response =>{
              if(response.data.success) {
                this.$Message.success('提交成功!');
                this.$router.push({name: '会员列表'});
              } else {
                this.$Message.error(response.data.msg);
              }
            })
            //此处代码是 提交成功 之后 页面将跳转到  会员列表解码


          } else {
            this.$Message.error('表单验证错误，请重新检查!');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      }
    }
  }
</script>

<style>
  .coninstar{
    width: 80%;
    height: 500px;
    margin: 0 auto;
  }

  .input{
    width: 250px;
  }
</style>